<template>
  <div class="login">
    <div class="left"></div>
    <div class="right">
      <h1>手机号登录</h1>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="" class="blo">
          <el-input v-model="mobile" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="" class="blo">
          <el-input
            v-model="password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <div>
        <div style="margin-bottom: 20px">
          <el-checkbox v-model="checked2">用户平台使用协议</el-checkbox>
          <p v-show="!checked2" style="color: red; font-size: 12px">
            您必须勾选用户的使用协议
          </p>
        </div>
        <el-button type="primary" @click="login" class="blo">登录</el-button>
      </div>
      <div class="bott">
        <el-button>手机号登录</el-button>
        <el-button>扫码登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import instance from '@/http/api'
import router from '@/router'
const mobile = ref('13800000002')
const password = ref('hm#qd@23!')
// 选择框
const checked2 = ref(true)
const login = async () => {
  if (checked2.value) {
    const res = await instance.post('sys/login', {
      mobile: mobile.value,
      password: password.value
    })
    localStorage.setItem('token', res.data)
    console.log(res)

    router.push('/home')
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
}
.blo {
  display: block;
  width: 350px;
  height: 40px;
}
.left {
  width: 1084px;
  height: 100%;
  background: url(@/assets/login.png) no-repeat;
  border-top-right-radius: 60px;
}
.right {
  width: 50%;
  height: 100%;
  padding: 0 0 0 176px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.right h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 40px;
}
.bott {
  margin-top: 20px;
}
.bott .el-button {
  width: 170px;
  height: 31px;
}
</style>
